.colorpicker-wrap * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-size: 0;
}
.colorpicker-wrap input {
    border:none;
    outline: none;
    font-size: 12px;
    padding:0 5px;
}
.colorpicker-wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
    background: #ebebeb;
    border: 1px solid #bbb;
    width:220px;
    height:250px;
    border-radius:5px;
    position: fixed;
    left:0;
    top:0;
}
.colorpicker-wrap .main-panel {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width:160px;
    height:160px;
    border: 1px solid #aaa;
    border-radius: 2px;
    background:#3289c7;
    display: inline-block;
    position:relative;
    cursor: crosshair;
}
.colorpicker-wrap .main-panel .color-mask1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')";
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.colorpicker-wrap .main-panel .color-mask2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')";
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}
.colorpicker-wrap .main-panel .colorpicker-btn-outer {
    background: none;
    position: absolute;
    width: 11px;
    height: 11px;
    margin: -6px 0 0 -6px;
    border: 1px solid black;
    border-radius: 50%;
    left:50%;
    top:50%;
}
.colorpicker-wrap .main-panel .colorpicker-btn-inner {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid white;
    border-radius: 50%;
}
.colorpicker-wrap .bar-panel {
    float:right;
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    width: 20px;
    height: 160px;
    border: 1px solid #aaa;
    cursor: n-resize;
    background: -webkit-linear-gradient(top center,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000);
    background: -moz-linear-gradient(top center,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000);
    background: linear-gradient(to bottom,#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000);
}
.colorpicker-wrap .bar-panel .bar-panel-btn {
    width:36px;
    height:5px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-18px;
}
.bar-panel-btn-left {
    position: absolute;
    left:0;
    top:-5px;
    border-left:8px solid #666;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
}
.bar-panel-btn-right {
    position: absolute;
    right:0;
    top:-5px;
    border-right:8px solid #666;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
}
.color-input-wrap {
    padding-top:10px;
    overflow: hidden;
}
.color-input-wrap .color-input-hex-wrap {
    float:left;
    overflow: hidden;
    padding-left: 24px;
    position: relative;
    background: #fff;
    border:1px solid #aaa;
}
.color-input-wrap .color-input-hex-wrap:before {
    content:"#";
    position: absolute;
    left:24px;
    top:0;
    height:100%;
    font-size: 12px;
    line-height: 24px;
}
.color-input-hex-wrap span {
    width: 20px;
    height: 20px;
    background: #666;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 2px;
    border:1px solid rgba(0,0,0,.1)
}
.color-input-hex-wrap input {
    height:24px;
    width:54px;
    font-size: 12px;
    line-height: 24px;
    outline: none;
    text-align: right;
    padding:0 5px;
    border:none;
}
.opacity-input-wrap {
    float:right;
    height:24px;
    position: relative;
}
.opacity-input-wrap>* {
    float:left;
    background: #fff;
}
.opacity-input-wrap span {
    width:24px;
    height:24px;
    border:1px solid #aaa;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.opacity-input-wrap span.arrow-left:before {
    content:"";
    border-right:10px solid #666;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    position: absolute;
    left: 5px;
    top: 5px;
}
.opacity-input-wrap span.arrow-left:hover:before {
    border-right:11px solid #666;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    left: 4px;
    top:4px;
}
.opacity-input-wrap span.arrow-right:before {
    content:"";
    border-left:10px solid #666;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    position: absolute;
    right: 5px;
    top: 5px;
}
.opacity-input-wrap span.arrow-right:hover:before {
    border-left:11px solid #666;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    right: 4px;
    top:4px;
}
.opacity-input-wrap input {
    width:36px;
    height:100%;
    border:1px solid #aaa;
    margin:0 2px;
    paddign:0 2px;
    text-align: center;
}
.color-cards {
    padding-top:10px;
}
.color-card {
    width:20px;
    height:20px;
    border:1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    float: left;
    margin-right:5px;
    cursor: pointer;
}
